// 1. React核心库
import React from 'react';

// 2. UI组件库 - 按字母顺序
import { Tag, Typography, Progress } from 'antd';

// 4. 专业组件库
import { ProDescriptions } from '@ant-design/pro-components';

// 5. 工具库
import dayjs from 'dayjs';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { AIConversation } from '@/services/generated';

const { Paragraph } = Typography;

interface ConversationDetailProps {
  data: AIConversation | null;
}

const ConversationDetail: React.FC<ConversationDetailProps> = ({ data }) => {
  if (!data) {
    return <div>暂无数据</div>;
  }

  // 状态映射
  const statusMap = {
    active: { color: 'green', text: '活跃' },
    archived: { color: 'orange', text: '已归档' },
    deleted: { color: 'red', text: '已删除' },
  };

  const status = statusMap[data.status as keyof typeof statusMap];

  return (
    <ProDescriptions
      column={2}
      title="对话详情"
      dataSource={data}
      columns={[
        {
          title: 'ID',
          dataIndex: 'id',
          span: 1,
        },
        {
          title: '对话标题',
          dataIndex: 'title',
          span: 1,
          render: (value) => (
            <Paragraph copyable ellipsis={{ rows: 1, expandable: true }}>
              {value}
            </Paragraph>
          ),
        },
        {
          title: 'AI模型',
          dataIndex: 'ai_model_name',
          span: 1,
          render: (value) => (
            <Tag color="blue">{value || '未设置'}</Tag>
          ),
        },
        {
          title: 'AI角色',
          dataIndex: 'ai_role_name',
          span: 1,
          render: (value) => (
            <Tag color="green">{value || '未设置'}</Tag>
          ),
        },
        {
          title: '状态',
          dataIndex: 'status',
          span: 1,
          render: () => (
            <Tag color={status?.color}>{status?.text}</Tag>
          ),
        },
        {
          title: '消息数量',
          dataIndex: 'message_count',
          span: 1,
          render: (value) => (
            <Tag color="purple">{value || 0} 条</Tag>
          ),
        },
        {
          title: 'Token使用情况',
          dataIndex: 'used_tokens',
          span: 2,
          render: (value) => (
            <div>
              <div style={{ marginBottom: 8 }}>
                已使用: <strong>{value || 0}</strong> tokens
              </div>
              <Progress
                percent={Math.min((Number(value) || 0) / 10000 * 100, 100)}
                size="small"
                status={Number(value) > 8000 ? 'exception' : Number(value) > 5000 ? 'active' : 'success'}
              />
            </div>
          ),
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          span: 1,
          render: (_,value) => dayjs(value.created_at).format('YYYY-MM-DD HH:mm:ss'),
        },
        {
          title: '更新时间',
          dataIndex: 'updated_at',
          span: 1,
          render: (_,value) => dayjs(value.updated_at).format('YYYY-MM-DD HH:mm:ss'),
        },
        {
          title: '最后消息时间',
          dataIndex: 'last_message_at',
          span: 1,
          render: (_, value) => value.last_message_at ? dayjs(value.last_message_at).format('YYYY-MM-DD HH:mm:ss') : '暂无消息',
        },
        {
          title: '创建者',
          dataIndex: 'created_by',
          span: 1,
          render: (value) => value || '系统',
        },
      ]}
    />
  );
};

export default ConversationDetail;
